<template>
    <CommonModal :isVisible="isVisible" :backgroundImage="modal8Png" @close="closeModal"
        :modalStyle="{ width: '1140px', height: '780px', minWidth: '1140px' }">
        <template #content>
            <!-- 昵称设置 -->
            <div class="nickname-section flex items-center">
                <input v-model="nickname" @focus="startEdit" @blur="finishEdit" @keyup.enter="finishEdit"
                    class="nickname-input" maxlength="10" autofocus />
                <img v-show="isEditing" src="../assets/images/8/edit_active.png" alt="">
                <img v-show="!isEditing" src="../assets/images/8/edit.png" alt="">
            </div>

            <!-- 头像选择 -->
            <div class="avatar-grid">
                <div v-for="avatarId in avatars" :key="avatarId" class="avatar-item"
                    :class="{ active: selectedAvatar == avatarId }" @click="selectAvatar(avatarId)">
                    <img :src="avatarMap[avatarId]" :alt="`头像${avatarId}`" />
                </div>
            </div>
        </template>

        <template #buttons>
            <div
                class="flex flex-col buttons-action position-absolute bottom-10px left-50% transform translate-x-[-50%]">
                <!-- 保存按钮 -->
                <div class="save-btn" @click="saveSettings"></div>
                <!-- 退出登录按钮 -->
                <div class="logout-btn" @click="logout"></div>
            </div>
        </template>
    </CommonModal>
</template>

<script setup>
import { ref, watch } from 'vue';
import CommonModal from './CommonModal.vue';
import modal8Png from '@/assets/images/8/modal.png'
import avatar1Png from '@/assets/images/8/a1.png'
import avatar2Png from '@/assets/images/8/a2.png'
import avatar3Png from '@/assets/images/8/a3.png'
import avatar4Png from '@/assets/images/8/a4.png'
import avatar5Png from '@/assets/images/8/a5.png'
import avatar6Png from '@/assets/images/8/a6.png'
import avatar7Png from '@/assets/images/8/a7.png'
import avatar8Png from '@/assets/images/8/a8.png'
import avatar9Png from '@/assets/images/8/a9.png'
import avatar10Png from '@/assets/images/8/a10.png'

let avatarMap = {
    1: avatar1Png,
    2: avatar2Png,
    3: avatar3Png,
    4: avatar4Png,
    5: avatar5Png,
    6: avatar6Png,
    7: avatar7Png,
    8: avatar8Png,
    9: avatar9Png,
    10: avatar10Png
}

const props = defineProps({
    isVisible: {
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(['close', 'save']);

// 昵称输入
const nickname = ref(localStorage.getItem('userNickname') || '');
const isEditing = ref(false);

watch(() => props.isVisible, (newVal) => {
    if (newVal) {
        nickname.value = localStorage.getItem('userNickname') || '';
    }
})

// 头像选择
const selectedAvatar = ref(localStorage.getItem('userAvatar') || 1);
const avatars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 编辑昵称
const startEdit = () => {
    isEditing.value = true;
};

const finishEdit = () => {
    isEditing.value = false;
};

// 选择头像
const selectAvatar = (avatarId) => {
    selectedAvatar.value = avatarId;
};

// 保存设置
const saveSettings = () => {
    console.log('保存设置时的 nickname 值:', nickname.value);
    console.log('保存设置时的 avatar 值:', selectedAvatar.value);
    
    const settings = {
        nickname: nickname.value,
        avatar: selectedAvatar.value
    };

    console.log('即将提交的设置数据:', settings);
    emit('save', settings);
    emit('close');
};

// 退出登录
const logout = () => {
    localStorage.removeItem('userNickname');
    localStorage.removeItem('userAvatar');
    emit('logout');
    closeModal();
    // 这里可以添加其他退出登录的逻辑
};

// 关闭弹窗
const closeModal = () => {
    emit('close');
};
</script>

<style lang="scss" scoped>
.nickname-section {
    position: absolute;
    top: 218px;
    left: 57%;
    transform: translateX(-50%);
    right: 80px;
    display: flex;
    align-items: center;
    gap: 15px;
    height: 64px;
    width: 400px;

    .nickname-input {
        display: flex;
        align-items: center;
        border-radius: 36px;
        gap: 10px;
        height: 68px;
        width: 100%;
        padding-left: 40px;
        background: transparent;
        font-size: 32px;
        font-weight: 800;
        color: #4C0000;

        &:focus {
            outline: none;
            background: transparent;
        }
    }

    img {
        width: 32px;
        height: 32px;
        position: absolute;
        right: 20px;
    }
}


.avatar-grid {
    position: absolute;
    top: 300px;
    left: 60%;
    transform: translateX(-50%);
    right: 80px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;

    .avatar-item {
        position: relative;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s ease;

        img {
            width: 100%;
            height: 100%;
        }

        &:hover {
            transform: scale(1.05);
            border: 3px solid #CA0A50;
        }

        &.active {
            transform: scale(1.02);
            border: 3px solid #CA0A50;
            box-shadow: 0px 0px 6px 0px #CA0A50;
        }
    }
}

.buttons-action {
    position: absolute;
    left: 54%;
    transform: translateX(-50%);
    bottom: 70px;


    // 保存按钮
    .save-btn {
        width: 600px;
        height: 84px;
        background: url('../assets/images/8/save.png') no-repeat center center;
        background-size: contain;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 90px;

        &:hover {
            background-image: url('../assets/images/8/save_active.png');
            transform: scale(1.02);
        }
    }

    // 退出登录按钮
    .logout-btn {
        width: 600px;
        height: 84px;
        background: url('../assets/images/8/logout.png') no-repeat center center;
        background-size: contain;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
            background-image: url('../assets/images/8/logout_active.png');
            transform: scale(1.02);
        }
    }
}
</style>